<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仪表盘 - 应急响应中心管理系统</title>
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/lib/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/lib/bootstrap-icons/font/bootstrap-icons.css}">
    
    <!-- 引入通用导航栏样式 -->
    <th:block th:replace="~{fragments/header :: navbarStyles}"></th:block>
    
    <!-- 高德地图API -->
    <script type="text/javascript">
      window._AMapSecurityConfig = {
        securityJsCode: "bd7cfe5378f27ad4720f0279a1b184a7",
      };
    </script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=9c44b0918d292a11356bd716509f09c3"></script>
    
    <style>
        .dashboard {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .card-red {
            border-top: 3px solid #e74c3c;
        }
        .card-blue {
            border-top: 3px solid #3498db;
        }
        .card-green {
            border-top: 3px solid #2ecc71;
        }
        .card-orange {
            border-top: 3px solid #f39c12;
        }
        .user-info {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .user-welcome {
            font-size: 20px;
            margin-bottom: 8px;
            font-weight: 500;
        }
        .user-role {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .user-role .badge {
            font-size: 0.9rem;
            padding: 8px 15px;
            border-radius: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .user-role .badge.bg-primary {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
            border: none;
        }
        .user-role .badge.bg-success {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%) !important;
        }
        .user-role .badge.bg-warning {
            background: linear-gradient(135deg, #f6d365 0%, #fda085 100%) !important;
        }
        .user-role .badge.bg-secondary {
            background: linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%) !important;
        }
        .dispatch-card {
            grid-column: span 2;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }
        .dispatch-card .card-title {
            color: white;
            font-size: 1.5rem;
            margin-bottom: 10px;
        }
        .dispatch-card .btn-light {
            background: rgba(255, 255, 255, 0.9);
            border: none;
            color: #667eea;
            font-weight: 600;
        }
        .dispatch-card .btn-outline-light {
            border: 2px solid rgba(255, 255, 255, 0.8);
            color: white;
            background: transparent;
            font-weight: 600;
        }
        .dispatch-card .btn-outline-light:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        /* 导航栏用户角色样式 */
        .nav-user-role {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 14px;
            line-height: 20px;
            display: inline-flex;
            align-items: center;
            margin: 0;
            height: 28px;
        }
        
        .nav-user-role i {
            margin-right: 4px;
            font-size: 14px;
        }

        /* 确保导航栏右侧内容垂直居中 */
        .navbar-nav {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .nav-item {
            display: flex;
            align-items: center;
        }

        /* 导航栏按钮样式统一 */
        .navbar .nav-link {
            color: rgba(255, 255, 255, 0.85) !important;
            padding: 4px 12px;
            height: 32px;
            display: inline-flex;
            align-items: center;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .navbar .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: white !important;
        }

        .navbar .nav-link.active {
            background-color: #1e88e5;
            color: white !important;
        }

        /* 确保所有导航项垂直居中对齐 */
        .navbar-nav {
            display: flex;
            align-items: center;
        }

        .nav-item {
            display: flex;
            align-items: center;
            margin: 0 2px;
        }

        /* 调整系统管理员按钮样式 */
        .admin-btn {
            padding: 4px 12px;
            height: 32px;
            background-color: #1e88e5;
            border-radius: 4px;
            color: white;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            margin-left: 8px;
        }
        .admin-btn:hover {
            background-color: #1976d2;
            color: white;
        }
    </style>
</head>
<body>
    <!-- 使用通用导航栏 -->
    <div th:replace="~{fragments/header :: navbar}"></div>

    <header class="header">
        <div class="container">
            <h1>应急响应中心管理系统</h1>
            <p>快速响应、高效调度、科学决策</p>
        </div>
    </header>

    <div class="container content">
        <div class="user-info" id="user-info">
            <div class="user-welcome" id="user-welcome">欢迎回来</div>
            <div class="user-role" id="user-role">用户类型：加载中...</div>
            <div style="margin-top: 10px;">
                <button class="btn btn-sm btn-outline-light" onclick="logout()">
                    <i class="bi bi-box-arrow-right"></i> 退出登录
                </button>
            </div>
        </div>
        
        <h2>系统概览</h2>
        
        <div class="dashboard">
            <div class="card dispatch-card" id="dispatch-card" style="display: none;">
                <div class="card-body">
                    <h3 class="card-title">🚨 调度中心</h3>
                    <p>实时监控事件状态，快速响应紧急情况，高效分配资源</p>
                    <div style="display: flex; gap: 10px; margin-top: 15px;">
                        <a th:href="@{/dispatch}" class="btn btn-light">🚀 进入调度</a>
                        <a th:href="@{/dispatch/create}" class="btn btn-outline-light">➕ 创建事件</a>
                    </div>
                </div>
            </div>
            
            <div class="card card-red">
                <div class="card-body">
                    <h3 class="card-title">待处理事件</h3>
                    <p>当前有<span id="pending-events-count">-</span> 个待处理事件</p>
                    <a th:href="@{/events}" class="btn btn-primary">查看详情</a>
                </div>
            </div>
            
            <div class="card card-blue">
                <div class="card-body">
                    <h3 class="card-title">进行中事件</h3>
                    <p>当前有<span id="inprogress-events-count">-</span> 个进行中事件</p>
                    <a th:href="@{/events}" class="btn btn-primary">查看详情</a>
                </div>
            </div>
            
            <div class="card card-green">
                <div class="card-body">
                    <h3 class="card-title">可用资源</h3>
                    <p>当前有<span id="available-resources-count">-</span> 个可用资源</p>
                    <a th:href="@{/resource}" class="btn btn-primary">查看详情</a>
                </div>
            </div>
            
            <div class="card card-orange">
                <div class="card-body">
                    <h3 class="card-title">人员状态</h3>
                    <p>当前有<span id="active-users-count">-</span> 名人员在岗</p>
                    <a th:href="@{/user}" class="btn btn-primary">查看详情</a>
                </div>
            </div>
        </div>
        
        <h2>最近事件</h2>
        <div class="card">
            <div class="card-body">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>事件名称</th>
                            <th>类型</th>
                            <th>地点</th>
                            <th>状态</th>
                            <th>上报时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="recent-events-tbody">
                        <tr><td colspan="6" style="text-align:center;">加载中...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 应急响应中心管理系统 保留所有权利</p>
        </div>
    </footer>

    <!-- 引入认证管理脚本 -->
    <script th:src="@{/js/auth.js}"></script>
    <script th:src="@{/js/permission.js}"></script>
      <script th:src="@{/js/navbar.js}"></script>
    <script th:src="@{/js/dashboard.js}"></script>
</body>
</html> 
